<template>
  <div>
    <div class="cascader-container">
      <el-cascader
        style="width: 350px"
        v-if="addressType === 1"
        :options="options"
        filterable
        :placeholder="placeholder"
        :props="{ checkStrictly: true, value: 'code', label: 'name' }"
        ref="cascaderAddr"
        v-model="selectedOptions"
        @change="handleChange"
        clearable
        class="cascader"
      >
        <template #default="{ node, data }">
          <span>{{ data.name }}</span>
          <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
        </template>
      </el-cascader>
      <el-cascader
        v-if="addressType === 2"
        size="large"
        filterable
        :options="regionData"
        @change="handleChange1"
        class="cascader"
        v-model="selectedOptions1"
      >
      </el-cascader>
      <el-cascader
        size="large"
        filterable
        v-if="addressType === 3"
        :options="provinceAndCityData"
        @change="handleChange2"
        class="cascader"
        v-model="selectedOptions2"
      >
      </el-cascader>
    </div>
  </div>
</template>

<script>
import pcas from '@/common/assets/pcas-code.json';
import { regionData, provinceAndCityData, codeToText } from 'element-china-area-data';

export default {
  name: 'addressSelector',
  props: {
    addressType: {
      type: Number,
      default: 1, // 1:到区选择地区 2:到县选择地区 3:到市选择地区
    },
    placeholder: {
      type: String,
      default: '请选择地址',
    }
  },
  data() {
    return {
      options: pcas,
      provinceAndCityData,
      selectedOptions:["520000", "520100", "520102", "520102001"],
      addrCodes: [],
      addrCodesSelected: [],
      regionData,
      codeToText,
      selectedOptions1: [],
      selectedOptions2: [],
      temp: {
        areaName: [],
        areaCode: [],
      },
      areaName: [],
      areaCode: [],
    };
  },
  methods: {
    handleChange() {
      const checkedNodes = this.$refs['cascaderAddr'].getCheckedNodes();
      if (checkedNodes.length > 0 && checkedNodes[0]) {
        this.addrCodes = checkedNodes[0].path;
        this.addrCodesSelected = checkedNodes[0].pathLabels;
      } else {
        this.addrCodes = [];
        this.addrCodesSelected = [];
      }
      this.$emit('addressChange', this.addrCodesSelected.join(''));
    },
    handleChange1() {
      this.temp.areaName = [];
      this.temp.areaCode = [];
      if (this.selectedOptions1.length >= 3 && this.selectedOptions1[0] !== null && this.selectedOptions1[1] !== null && this.selectedOptions1[2] !== null) {
        for (let i = 0; i < 3; i++) {
          this.temp.areaName.push(this.codeToText[this.selectedOptions1[i]]);
          this.temp.areaCode.push(this.selectedOptions1[i]);
        }
      }
      this.$emit('addressChange', this.temp.areaName.join(','));
    },
    handleChange2() {
      this.areaName = [];
      this.areaCode = [];
      if (this.selectedOptions2.length >= 2 && this.selectedOptions2[0] !== null && this.selectedOptions2[1] !== null) {
        for (let i = 0; i < 2; i++) {
          this.areaName.push(this.codeToText[this.selectedOptions2[i]]);
          this.areaCode.push(this.selectedOptions2[i]);
        }
      }
      this.$emit('addressChange', this.areaName.join(','));
    },
  },
};
</script>

<style scoped>
.cascader-container {
  margin: 0 auto;
  font-family: Arial, sans-serif;
  padding: 0; /* 去掉 padding */
  background-color: transparent; /* 设置背景透明 */
  box-shadow: none; /* 去掉阴影 */
  border: none; /* 去掉边框 */
}

.cascader {
  border: 1px solid #dcdfe6; /* 添加输入框样式的边框 */
  border-radius: 4px; /* 圆角 */
  box-shadow: none; /* 去掉内部阴影 */
  padding: 0; /* 去掉额外间距 */
  background-color: white; /* 输入框背景色 */
}

.el-input__inner, /* 针对输入框内部样式调整 */
.el-cascader__label {
  line-height: 32px;
}

.el-cascader {
  height: 32px; /* 高度调整为输入框大小 */
}
</style>
